<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script data-th-src="@{/layui/layui.js}"></script>
    <script data-th-src="@{/public.js}"></script>

    <link rel="stylesheet" data-th-href="@{/layui/css/layui.css}">
<!--    <link rel="stylesheet" href="//at.alicdn.com/t/font_1965060_ydefmnigb2i.css">-->
    <link rel="stylesheet" href="//at.alicdn.com/t/font_1968601_4m2l26a7w4w.css">

    <style>
        .file-icon {
            font-size: 2em;
        }
    </style>
</head>
<body>

<div class="layui-btn-container">
    <button class="layui-btn layui-btn-sm layui-btn-normal" id="upload" style="margin:10px 5px 0px 10px">
        <i class="layui-icon layui-icon-upload"></i>
        上传
    </button>
    <button class="layui-btn layui-btn-sm " id="createDir" style="margin:10px 5px 0px 5px">
        <i class="layui-icon layui-icon-add-circle"></i>
        新建文件夹
    </button>
    <button class="layui-btn layui-btn-sm " id="download" style="margin:10px 5px 0px 5px">
        <i class="layui-icon layui-icon-download-circle"></i>
        下载
    </button>
    <button class="layui-btn layui-btn-sm " id="delete" style="display: none;margin:10px 5px 0px 5px">
        <i class="layui-icon layui-icon-delete"></i>
        删除
    </button>
</div>
<div class="layui-btn-container" style="padding-left: 10px;padding-top: 10px;">
    <span class="layui-breadcrumb preDir">
      <a pid="-1">返回上一级&emsp;|&emsp;</a>
    </span>
    <span class="layui-breadcrumb dirList" lay-separator=">">
          <a pid="-1"><cite>全部文件</cite></a>
    </span>
</div>

<table id="diskTable" lay-filter="disk"></table>

<script data-th-inline="javascript">
    let download=new DisplayElement("#download",false);
    let history = new DirList(document.querySelector(".dirList"));
    history.push(-1, undefined, "全部文件");
    let preDir = new DirList(document.querySelector(".preDir"));

    download.addEventListener("click",function(e){
        let {table} =layui;
        let checkStatus = table.checkStatus('files');
        let ids=checkStatus.data.map(df=>"ids="+df.id).join("&");
        downFile("[(@{/download})]?"+ids);
    });

    function getPid() {
        let parent = layui.data("parentDir");
        if (parent) {
            if (parent.pid != null && parent.pid != undefined) {
                return parent.pid;
            }
        }
        return -1;
    }

    function setPid(pid) {
        layui.data("parentDir", {value: pid, key: 'pid'});
    }

    layui.use(['table', 'jquery', 'form', 'layer', 'upload', 'element'], function () {
        let {table, $, form, layer, upload} = layui;
        //重置父文件夹
        setPid(-1);

        //监听面包屑事件
        history.addListener(function () {
            if (this.hasAttribute("pid")) {
                let pid = $(this).attr("pid");
                let obj = history.get(pid);
                setPid(obj.pid);
                history.pop(obj.pid);
                preDir.clear();
                if(obj.pid){
                    preDir.push(obj.pid,obj.pid == -1 ?undefined:history.get(obj.pid).pid, '返回上一级');
                    preDir.push(obj.pid,obj.pid == -1 ?undefined:history.get(obj.pid).pid, '');
                }
                table.reload('files', {
                    where: {
                        pid: obj.id
                    }
                });
            }
        })
        preDir.addListener(function () {
            if (this.hasAttribute("pid")) {
                let pid = $(this).attr("pid");
                let obj = preDir.get(pid);
                setPid(obj.pid);
                history.pop();
                preDir.clear();
                if(obj.pid&&obj.pid>-1){
                    preDir.push(obj.pid,obj.pid == -1 ?undefined:history.get(obj.pid).pid, '返回上一级');
                    preDir.push(obj.pid,obj.pid == -1 ?undefined:history.get(obj.pid).pid, '');
                }
                table.reload('files', {
                    where: {
                        pid: obj.pid
                    }
                })
            }
        })

        //执行实例
        var uploadInst = upload.render({
            elem: '#upload'
            ,
            url: '[(@{/diskInfo/fileUpload})]' //上传接口
            ,
            data: {
                pid: getPid
            }
            ,
            exts: 'ai|bmp|class|jpg|jp2|gif|tif|png|png|png|psd|wmf|mid|ico|mp3|avi|swf|flv|mp4|mov|wmv|wma|zip|gz|tar|msi|obj|dll|cab|exe|rar|sys|hlp|vmdk|pst|pdf|doc|rtf|xls|ppt|vsd|docx|xlsx|pptx|mdb|ps|msg|eps|jar|sln|zlib|sdf'
            ,
            done: function (res) {
                if (res.code == 0) {
                    //上传完毕回调
                    table.reload('files');
                    layer.msg("上传成功");
                } else {
                    layer.msg("上传失败");
                    console.error(res.msg);
                }

            }
            ,
            error: function () {
                //请求异常回调
                layer.msg("上传失败");
            }
        });
        table.render({
            id: 'files'
            , elem: '#diskTable'
            , height: 312
            , url: '[(@{/diskInfo})]' //数据接口
            , defaultToolbar: false
            , cols: [
                [ //表头
                    {fixed: 'left', type: 'checkbox'}
                    , {
                    field: 'name', title: '文件名', width: 500, templet: function (d) {
                        if (d.directory) {
                            return `<i class="iconfont icon-directory file-icon"></i>&emsp;<span>${d.name}</span>`;
                        } else if (d.fileType) {
                            return `<i class="iconfont icon-${d.fileType.iconInfo.name} file-icon"></i>&emsp;<span>${d.name}</span>`;
                        }
                        return d.name;
                    }
                }
                    , {
                    field: 'size', title: '大小', sort: true, templet: function (d) {
                        if (d.size > 0) {
                            return d.size;
                        }
                        return '-';
                    }
                }
                    , {field: 'updatedTime', title: '修改日期'}
                    , {fixed: 'right', title: '操作', width: 80}
                ]
            ]
        });

        //监听行双击事件
        table.on('rowDouble(disk)', function (obj) {
            if (obj.data.directory) {
                setPid(obj.data.id);
                history.push(obj.data.id, obj.data.pid, obj.data.name);
                preDir.clear();
                preDir.push(obj.data.id, obj.data.pid, '返回上一级');
                preDir.push(obj.data.id, obj.data.pid, '');
                table.reload('files', {
                    where: {
                        pid: obj.data.id
                    }
                })
            }
        });

        $("#createDir").click(function (e) {
            layer.prompt({title: '请输入文件夹名称'}, function (val, index) {
                $.post("[(@{/diskInfo/createDir})]", {name: val, pid: getPid()}, function (rs) {
                    if (rs.code == 0) {
                        table.reload('files');
                        layer.msg("创建成功");
                    } else {
                        layer.msg("创建失败");
                        console.error(rs.msg);
                    }
                }, 'json')
                layer.close(index);
            });
        });


        let ids = new Array();
        table.on('checkbox(disk)', function (obj) {
            ids.length = 0;
            let checkStatus = table.checkStatus('files');

            //判断当前是否为选中状态
            if (checkStatus.data.length>0) {
                $("#delete").show();
                for (let i = 0; i < checkStatus.data.length; i++) {
                    ids.push(checkStatus.data[i].id)
                }
                console.log(ids);
            } else {
                $("#delete").hide();
            }
            // 控制下载按钮的显示状态
            download.visable=checkStatus.data.length>0;
        });

        $("#delete").click(function (e) {

            layer.confirm('确定删除？', function (index) {
                layer.close(index);
                $.post(
                    "[(@{/diskInfo/deleteFiles})]"
                    , {
                        'ids': ids
                    }
                    , function (rs) {
                        if (rs.code == 0) {
                            table.reload('files');
                            $("#delete").hide();
                            layer.msg("删除成功");

                        } else {
                            layer.msg("删除失败");
                            console.error(rs.msg);
                        }
                    }
                    , 'json')
            });
        });
    })
</script>
</body>
</html>